<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/好评.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3695698_3anr90x954l.css?spm=a313x.7781069.1998910419.53&file=font_3695698_3anr90x954l.css">
</head>
<body>
    <div class="box"></div>
    <script>
        var color1 = "#ccc";
        var color2 = "red";
        var cat = -1;
        var box = document.getElementsByClassName("box")[0];
        var i = 0;
        while(i++<=5){
            box.innerHTML+=`<i class="iconfont"></i>`;
        }
        var items = document.getElementsByClassName("iconfont");
        i=0;
        while(i++<items.length-1){
            items[i].classList.add("icon-shoucang");
            items[i].setAttribute("data-index",i);
            items[i].style.color = color1;
            items[i].onclick = function(){
                var call = this.getAttribute("data-index");
                if(call>cat){
                    white(call,color2);
                }else if(call==cat){
                    white(call,color1);
                }else{
                    white(cat,color1);
                    white(call,color2);
                }
                cat = call;
                function white(who,color){
                    for(var j = 0;j<=who;j++){
                        items[j].style.color = color;
                    }
                }
            }
        }
    </script>
</body>
</html>